<template>
	<view class="uni_content">
		<view class="title">
			<span>个人中心</span>
		</view>
		<view class="content_top">
			<image :src="backSrc" class="back_img" @click="handleBack"></image>
		</view>
		<view class="personal">
			<view class="personal_information">
				<view class="personal_user">
					<u-avatar :src="avatarSrc" style="width: 42px;height: 42px;"></u-avatar>
					<view class="name_center">
						<view class="name">{{ name }}</view>
					</view>
					<tn-button v-show="!isDefault" height="31px" style="position: absolute;right: 16px;" @click="toDrafts">
						<nobr>
							<text class="tn-icon-folder" style="margin-right: 3px;"></text>
							草稿箱({{ draftsNum }})
						</nobr>
					</tn-button>
				</view>
			</view>
			<view class="personal_release">
				<u-row gutter="16">
					<u-col span="4">
						<view class="personal_box">
							<view class="personal_num">{{ releaseNum }}</view>
							<view class="personal_title">发布星族圈</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="personal_box">
							<view class="personal_num">{{ likeNum }}</view>
							<view class="personal_title">总获赞</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="personal_box">
							<view class="personal_num">{{ commentNum }}</view>
							<view class="personal_title">总评论</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="personal_tabs">
			<tn-tabs :list="tabsList" :isScroll="false" :current="tabCurrent" activeColor="#000" inactiveColor="#9CA3AF" @change="changeTabs"></tn-tabs>
		</view>
		<myDefault v-show="isDefault" />
		<myList v-show="!isDefault" />
	</view>
</template>

<script>
import myDefault from './components/myDefault.vue';
import myList from './components/myList.vue';

export default {
	components: {
		myDefault,
		myList
	},
	data() {
		return {
			backSrc: require('@/pages/users/static/xingzu/back.png'),
			name: 'Adar',
			releaseNum: 0,
			likeNum: 0,
			commentNum: 0,
			tabCurrent: 0,
			draftsNum: 1,
			tabsList: [
				{ name: '全部' },
				{ name: '已通过' },
				{ name: '审核中' },
				{ name: '已驳回' },
			],
			avatarSrc: 'https://img2.baidu.com/it/u=98716646,3790133624&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
			isDefault: false,
		}
	},
	methods: {
		changeTabs(index) {
			this.tabCurrent = index
		},
		handleBack() {
			console.log(123)
			this.$emit('back')
		},
		toDrafts() {
			uni.navigateTo({
				url: '/pages/users/xingzu/drafts'
			})
		}
	}
}
</script>

<style scoped>
page {
	background-color: #F6F6F6;
}
.uni_content {
	margin-top: -55px;
	/* padding: 4px 16px; */
	padding-bottom: calc(var(--window-bottom) + 50px);
}
.content_top {
	width: 100%;
	height: 260px;
	background: linear-gradient( 180deg, #D9EFF3 0%, #FCFEFE 87%, #F6F6F6 100%);
	z-index: 999;
}
.back_img {
	position: absolute;
	width: 32px;
	height: 34px;
	margin: 40px 20px;
	z-index: 2;
}
.title {
	position: absolute;
	width: 100%;
	margin-top: 45px;
	text-align: center;
	color: #000000;
	font-size: 16px;
	font-weight: bold;
}
.personal {
	width: 100%;
	height: 20px;
	position: absolute;
	margin-top: -160px;
	padding: 0 37px;
}
.personal_information {
	display: flex;
	justify-content: center;
	align-items: center;
}
.name_center {
	margin-left: 10px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
}
.name {
	width: 45%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: absolute;
}
.personal_user {
	width: 100%;
	display: flex;
	align-items: center;
}
.personal_release {
	margin-top: 22px;
}
.personal_box {
	width: 100%;
	text-align: center;
}
.personal_num {
	font-size: 18px;
	font-weight: bold;
}
.personal_title {
	font-size: 12px;
	color: #1A1A1A;
}
.personal_tabs {
	margin: -40px 16px 0 16px;
	background-color: #FFFFFF;
	border-radius: 8px;
}
.drafts {
	/* width: 90px;
	height: 31px; */
	position: absolute;
	right: 16px;
}
</style>